<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ include file="/common/common.jsp" %>	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>${siteName}</title>
        <%@ include file="/common/commonstyle.jsp" %>
        <style>
            #menu-box{
                width:920px;
                height:420px;
                margin-left:66px;
                clear: both;
                overflow: hidden;
            }
            #menu-box .illustration {
                position: absolute;
                width: 920px;
                height: 420px;
                background-repeat: no-repeat;
                background-position: right bottom;
                background-image:url('${base}/images/desk.png');

            }
            #menu-box .block {
                position: relative;
                float: left;
                width: 222px;
                height: 200px;
                margin: 3px;
                overflow: hidden;
            }
            #menu-box .block .block-bg {
                position: absolute;
                width: 100%;
                height: 80px;
            }
            #menu-box .block .desk-part {
                position: absolute;
                width: 136px;
                height: 155px;
                right:0px;
                bottom:0px;
                background-repeat: no-repeat;
                background-image:url('${base}/images/desk-part.png');
            }
            #menu-box .block .register {
                background-image: url('${base}/images/fish.png');
            }
            #menu-box .block .personal {
                background-image: url('${base}/images/fish.png');
            }
            #menu-box .block .business {
                background-image: url('${base}/images/fish.png');
            }
            #menu-box .block .health {
                background-image: url('${base}/images/fish.png');
            }
            #menu-box .block .delivery {
                background-image: url('${base}/images/fish.png');
            }
            #menu-box .block .gift {
                background-image: url('${base}/images/fish.png');
            }
            #menu-box .block img {
                position: absolute;
                width: 100%;
                height: 100%;
            }       
        </style>
        <script type="text/javascript">
            
            $(function() {
                $(".block").mouseenter(function() {
                    $(this).find("img").stop().animate({top: 80}, 'slow', 'swing');
                }).mouseleave(function() {
                    $(this).find("img").stop().animate({top: 0}, 'slow', 'swing');
                });
            });
        </script>
    </head>

    <body>
        <div class="main">
            <div class="nav">
                <img src="${base}/images/header-top.png"/>
                <div class="login_alert">
                    <ul>
                        <li class="china"><a href="${base}/i18nCtl/language?locale=zh_CN">中文</a><a href="${base }/i18nCtl/language?locale=en_US">/&nbsp;English</a></li>
                    </ul>
                </div>
            </div>
            <div class="title">
                <jsp:useBean id="now" class="java.util.Date" />
                <p>
                    <span>今天<fmt:formatDate value="${now}" pattern="M月d日" />，Got your diary today?</span>
                    <br/>
                    <spring:message code="hello" />！<a href="${base}/frontUserCtl/myaccount">${frontCurrentUser.username }</a>
                    <c:if test="${null == frontCurrentUser}">
	                    <a href="javascript:;" onclick="loginModel();">登陆</a>&nbsp;|&nbsp;
	                    <a href="javascript:;" onclick="loginModel();">注册</a>&nbsp;|&nbsp;
                    </c:if>
                    <c:if test="${null != frontCurrentUser}">
                    	<a href="${base}/frontUserCtl/myaccount">我的BF</a>&nbsp;|&nbsp;
                    </c:if>
                    <a href="javascript:;" onclick="toOrderInfo();">餐盘</a>
                    <c:if test="${null != frontCurrentUser}">
                    &nbsp;|&nbsp;<a href="#" onclick="location.href = '${base}/frontUserCtl/userLogout'"><spring:message code="logout" /></a>
                    </c:if>
                </p>
            </div>
            <div id="menu-box">
                <div class="illustration"></div>
                <a class="block" href="javascript:;" onclick="loginModel();">
                    <div class="block-bg register"></div>
                    <img src="${base}/images/menubox-index.png" width="224" height="224"/>
                </a>
                <a class="block" href="${base}/waresFrontCtl/menuInfo">
                    <div class="block-bg personal"></div>
                    <img src="${base}/images/menubox-personal.png" width="224" height="224"/>
                </a>
                <a class="block" href="${base}/waresFrontCtl/businessMenuInfo">
                    <div class="block-bg business"></div>
                    <img src="${base}/images/menubox-business.png" width="224" height="224"/>
                </a>
                <a class="block" href="${base}/health1">
                    <div class="block-bg health"></div>
                    <img src="${base}/images/menubox-health.png" width="224" height="224"/>
                    <div class="desk-part"></div>
                </a>
                <a class="block" href="${base}/orderinput">
                    <div class="block-bg delivery"></div>
                    <img src="${base}/images/menubox-delivery.png" width="224" height="224"/>
                </a>
                <a class="block" href="${base}/contact">
                    <div class="block-bg gift"></div>
                    <img src="${base}/images/menubox-gift.png" width="224" height="224"/>
                </a>
            </div>
            <%@ include file="/common/footer.jsp" %>
        </div>
    </body>
</html>